<!--
 * @FileDescription: 员工用户搜索表单
 * @Author: 叶永鸿、袁年政
 * @Date: 2021-7-17
 * @LastEditors: 叶永鸿
 * @LastEditTime: 2021-7-18
 -->
<template>
  <!--员工自己的搜索-->
  <el-container style="height: 500px">
    <el-header style="text-align: center; font-size: 12px">
      <el-input
        v-model="searchName"
        placeholder="请输入员工姓名或者电话"
        style="width: 30%"
        @keyup.enter="searchSubmit"
      ></el-input>
      <el-button type="primary" @click="searchSubmit">搜索</el-button>
    </el-header>
    <el-main>
      <div>
    <el-table
      :data="searchedInfor"
      style="width: 100%"
      max-height="1000"
    >
      <!--el-table-column prop="picture" label="头像" width="200">
      </!--el-table-column-->
      <el-table-column prop="realname" label="姓名" width="200">
      </el-table-column>
      <el-table-column prop="telephone" label="电话" width="300">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
      <div>
        <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :page-size="2"
        :total="total">
        </el-pagination>
      </div>
  </div>
      <!--searchInfor :searchedInforToChild="searchedInfor"></！searchInfor-->
    </el-main>
  </el-container>
</template>

<script>
import searchInfor from "./searchInfor.vue";

export default {
  name: "emploeeSearch",

  data() {
    return {
      searchName: "",
      currentPage:"1",
      searchedInfor: [],
    };
  },
  methods: {
    handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage = val;
			this.searchSubmit(val);
		},
    searchSubmit(num1) {
      //搜索员工功能函数
      console.log(this.searchName)
      var that = this;
      this.$axios
        .get(
          "http://47.100.167.206:8082/Query/QueryHr?nameortel=" +
            this.searchName
        )
        //this.$axios.get("#?nameortel="+this.searchName)
        .then(
          function (response) {
            console.log(response);
            //searchedInfor=this.response;
            that.searchedInfor = response.data;
          },
          function (err) {
            alert("搜索员工失败");
          }
        );
      console.log(this.searchName);
    },
  },
  components: { searchInfor },
};
</script>

<style >
</style>
